<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="vue/vue.js"></script>
</head>
<body>
<div id="app">
    <div @click="show2()">
        <input type="button" value="按钮" @click="show()">
    </div>
    <div @click="show2()">
        <!--js原生阻止事件冒泡-->
        <input type="button" value="按钮" @click="show3($event)">
    </div>
    <div @click="show2()">
        <!--vue本身阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="show4()">
    </div>
</div>

<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods:{
            show:function () {

                alert(1)
            },
            show2:function () {
             alert(2)
            },
            show3:function (e) {
               alert(3)
                e.cancelBubble=true
            },
            show4:function () {
                alert(4)
            }
        }


    })
</script>

</body>
</html>